<ActionBar title="Reserve Table" class="action-bar">
    <NavigationButton text="Menu" icon="res://ic_drawer" (tap)="openDrawer()"></NavigationButton>
</ActionBar>
<RadSideDrawer #drawerComponent tkToggleNavButton showOverNavigation="true">
    <ScrollView tkDrawerContent class="sidedrawer-left">
        <StackLayout horizontalAlign="left">
            <drawer-content></drawer-content>
        </StackLayout>
    </ScrollView>
    <StackLayout orientation="vertical" tkMainContent class="page">
        <GridLayout id="formView" class="m-5" rows="auto auto auto auto" columns="*, *" [formGroup]="reservation" [visibility]="showForm ? 'visible' : 'collapsed'">
            <Label class="h3 m-15" row="0" col="0" text="No. of Guests" textWrap="true"></Label>
            <TextField class="input input-border" id="textGuests" hint="Enter Number of Guests" [text]='' (tap)="createModalView('guest')"
                (textChange)="onGuestChange($event)" row="0" col="1" formControlName="guests"></TextField>
            <Label class="h3 m-15" row="1" col="0" text="Smoking?" textWrap="true"></Label>
            <Switch class="m-15" row="1" col="1" checked="false" (checkedChange)="onSmokingChecked($event)" formControlName="smoking"></Switch>
            <Label class="h3 m-15" row="2" col="0" text="Date and Time" textWrap="true"></Label>
            <TextField class="input input-border" id="textDateTime" hint="Enter Date and Time" [text]='' (tap)="createModalView('date-time')"
                (textChange)="onDateTimeChange($event)" row="2" col="1" formControlName="dateTime"></TextField>
            <Button class="btn btn-primary btn-active m-15" row="3" col="0" text="Submit" (tap)="onSubmit()"></Button>
        </GridLayout>
        <GridLayout id="dataView" class="m-5" rows="auto auto auto auto" columns="*, *" [visibility]="!(showForm) ? 'visible' : 'collapsed'">
            <Label class="h3 m-15" row="0" col="0" text="No. of Guests" textWrap="true"></Label>
            <Label class="label m-15" id="textGuests" row="0" col="1" [text]="reservation.value.guests"></Label>
            <Label class="h3 m-15" row="1" col="0" text="Smoking?" textWrap="true"></Label>
            <Label class="label m-15" row="1" col="1" [text]="reservation.value.smoking"></Label>
            <Label class="h3 m-15" row="2" col="0" text="Date and Time" textWrap="true"></Label>
            <Label class="label m-15" [text]='' row="2" col="1" [text]="reservation.value.dateTime | date: 'medium'"></Label>
        </GridLayout>
    </StackLayout>
</RadSideDrawer>